<template>
  <div class="list-content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="isMuilUnitUser">
        <el-select filterable @change="getStatis()" v-model="formInline.orgIds" placeholder="请选择业主单位">
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formInline.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="util.intTimePickerOptions()"
          @change="getStatis()"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getStatis()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row v-loading="loading">
      <el-col :span="24">
        <div class="grid-content">
          <div class="chart-heaad">高危信号分析</div>  
          <div id="finishRate_HighRiskSignalAnalysis" class="chart-content"></div>
          <div id="inspectorRate_HighRiskSignalAnalysis" class="chart-content"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { qnToken} from '@/api/api'
import * as Dao from '@/api/riskFireSignal'
import { getOrgList} from '@/api/org'
import util from '@/utils/util'

export default {
  name: 'HighRiskSignalAnalysis',
  props:['param'],
  data () {
    return {
      freashStaticFlag:0,
      formInline: {
        orgIds:this.$store.state.userinfo.isMuilUnitUser ? '' : this.$store.state.userinfo.org.id,
        time:'',
      },
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      orgOptions: [{organizationId: '',shortName: "全部业主单位"}],
      loading: false,
      colorList:[
                  '#70bbea','#5c90d2','#a58ad4','#f3b75e','#ea4f63',
                   '#16adc4','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                ]
    }
  },
  created:function() {
    //默认一个月
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.formInline.time = [util.ilinkTimeformat.format(start, 'yyyy-MM-dd ')+'00:00:00', util.ilinkTimeformat.format(end, 'yyyy-MM-dd ')+'23:59:59']
    //绑定下拉框
    if(this.isMuilUnitUser){
      getOrgList({queryType: 0}).then((data)=>{
        this.orgOptions.push.apply(this.orgOptions,data.data);
      })
    }
   this.getStatis()
  },
  methods: {
    getStatis() {
      let that = this
      that.loading = true
      Dao.getTimeCycleStatistics({
        organizationId: that.formInline.orgIds,
        startTimeStr: that.formInline.time?(that.formInline.time[0].split(' ')[0]+' 00:00:00'):'',
        endTimeStr: that.formInline.time?(that.formInline.time[1].split(' ')[0]+' 23:59:59'):'',
        handlerStatus:-1,
        isReset:-1,
        timeType:13,
        timeCycle: 3,
        sortType: 1
      }).then((data)=>{
        that.loading = false
        let xArray=[];
        let yArray=[];
        $.each(data.data,(index,obj)=>{
          xArray.push(obj.dayTime);
          yArray.push(obj.signalCount);
        })
        //画图
        let option_echart = {
            title: {
              textStyle: { color: '#2F3444', fontSize: '16' },
              y: 'left',
              left: '35',
              top: '0',
              text: '火灾高危信号发生数量变化',
            },
            grid: {
                left: '3%',
                right: '3%',
                top: '35',
                bottom: '30'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            xAxis: [{
                type: 'category',
                axisTick: { show: false },
                boundaryGap: false,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 0.3)',
                        width: 1, //这里是为了突出显示加上的
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#2F3444',
                        fontSize: 14
                    }
                    //interval:xInterval
                },
                data:xArray
            }],
            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 0, //这里是为了突出显示加上的
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#2F3444',
                        fontSize: 14
                    }
                    //interval:xInterval
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 0.3)',
                        width: 1,
                    }
                },
                name: '',
                minInterval: 1
            }],
            series: [{
                type: 'line',
                stack: '总量',
                smooth: true,
                symbol:"circle",
                symbolSize:7,
                // areaStyle: { normal: {} },
                itemStyle: {
                    normal: {
                        lineStyle:{
                            width:1.5,//折线宽度
                        },
                        color:"#2B6DBB"//折线颜色
                    },
                    emphasis: {
                        color: '#2B6DBB'
                    },
                },
                data: yArray
            }]
        };
        that.$echarts.init(document.getElementById('finishRate_HighRiskSignalAnalysis')).setOption(option_echart, true); 
      })
      Dao.getOrgStatistics({
        organizationId: that.formInline.orgIds,
        startTimeStr: that.formInline.time?(that.formInline.time[0].split(' ')[0]+' 00:00:00'):'',
        endTimeStr: that.formInline.time?(that.formInline.time[1].split(' ')[0]+' 23:59:59'):'',
        handlerStatus: -1,
        isReset: -1,
        timeType: 13,
        timeCycle: 3,
        sortType: 0,
        sortNum: 10,
      }).then((data)=>{
        that.loading = false
        let yData = [];
        let barxData = [];
        $.each(data.data,(index,obj)=>{
          yData.push(obj.orgName);
          barxData.push({
            value:obj.signalCount
          });
        })
        //画图
        let option_echart = {
            title: {
              textStyle: { color: '#2F3444', fontSize: '16' },
              y: 'left',
              left: '35',
              top: '0',
              text: '火灾高危信号数量TOP10单位',
            },
            grid: {
                left: '3%',
                right: '3%',
                top: '35',
                bottom: '30'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                show:true,
                axisTick: {
                    show: false
                },
                triggerEvent: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 0.3)',
                        width: 1, //这里是为了突出显示加上的
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#2F3444',
                        fontSize: 14
                    },
                    //interval:xInterval
                },
                //max:30,
                boundaryGap: true,
                data: yData
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                //min:minLeavel,
                //max:maxLeavel,
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#2F3444',
                        fontSize: 14
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 0.3)',
                        opacity: 0.7
                    }
                },
                axisPointer: {
                    snap: true
                }
            },
            series: [{
                name: "火灾高危信号数量",
                type: 'bar',
                barWidth: '30',
                itemStyle: {
                    normal: {
                        color: '#5c90d2',
                    }
                },
                label: {
                    normal: {
                        show: false,
                        position: 'inside'
                    }
                },
                data: barxData
            }]
        };
        that.$echarts.init(document.getElementById('inspectorRate_HighRiskSignalAnalysis')).setOption(option_echart, true); 
      })
    },
  },
}
</script>
<style lang="scss" scoped>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    .chart-heaad{
      height:25px;
      line-height:25px;
      font-size:18px;
      font-weight:500;
      color:rgba(68, 107, 222, 1);
      -webkit-text-stroke:1px rgba(68, 107, 222, 1);
      text-stroke:1px rgba(68, 107, 222, 1);
    }
    .chart-content{
      margin-top: 20px;
      height: 350px;
      width: 100%;
    }
  }
</style>